<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--针对IE浏览器，使其运行最新的渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--获取物理宽度，缩放比例1：1-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>好友动态圈</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="__PUBLIC__/Css/Friends.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <nav class="row navbar-fixed-top" id="nav">
        <div class="col-xs-2">
            <button class="btn btn-default" type="submit" id="btn1">
                <span class='glyphicon glyphicon-menu-left' aria-hidden="true"></span>
            </button>
        </div>
        <div class="col-xs-8 text-center">
            <p>动态</p>
        </div>
        <div class="col-xs-2">
            <button class="btn btn-default" type="submit" id="btn2">
                <span class='glyphicon glyphicon-camera' aria-hidden="true"></span>
            </button>
        </div>
    </nav>
    <div class="row" id="headerimg">
    <div class="container-fluid" id="headermain">
        <div class="col-xs-3"><img src="__PUBLIC__/images/head.png" class="img-circle " id="head"></div>
        <div class="col-xs-7"><p id="nickname">追风少年</p></div>
        <div class="col-xs-2"><p id="message" class='glyphicon glyphicon-menu-right' aria-hidden="true"></p></div>
    </div>
     </div>
    <div class="container msg">
        <div class="row">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="img-circle media-object" src="__PUBLIC__/images/user.png" width="60px" height="60px">
                    </a>
                </div>
                <div class="media-body text-justify">
                    <h4 class="media-heading">宝龙城市广场</h4>
                    <h5>来自：宝龙广场星火Wifi</h5>
                </div>
                <h4 class="text-indent:2em">新浪云存储是新浪云服务针对移动互联网打造的下一个重要的产品,新浪有10多年服务于几千万日访问用户的充足经验,新浪云存储采用先进的全分布式系统架构和存储技术,覆盖...</h4>
                <h5>今天00：00</h5>
                <a type="button" class="btn btn-default more" data-container="body" data-toggle="popover" data-placement="left" data-content="点赞 | 转发 | 评论 ">
                    <span class='glyphicon glyphicon-option-horizontal' aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </div>
<div class="container msg">
    <div class="row">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="img-circle media-object" src="__PUBLIC__/images/user.png" width="60px" height="60px">
                </a>
            </div>
            <div class="media-body text-justify">
                <h4 class="media-heading">宝龙城市广场</h4>
                <h5>来自：宝龙广场星火Wifi</h5>
            </div>
                <h4 class="text-indent:2em">新浪云存储是新浪云服务针对移动互联网打造的下一个重要的产品,新浪有10多年服务于几千万日访问用户的充足经验,新浪云存储采用先进的全分布式系统架构和存储技术,覆盖...</h4>
                <h5>今天00：00</h5>
                <a type="button" class="btn btn-default more" data-container="body" data-toggle="popover" data-placement="left" data-content="123">
                  <span class='glyphicon glyphicon-option-horizontal' aria-hidden="true"></span>
                </a>
        </div>
    </div>
</div>
    <div class="container msg">
        <div class="row">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="img-circle media-object" src="__PUBLIC__/images/user.png" width="60px" height="60px">
                    </a>
                </div>
                <div class="media-body text-justify">
                    <h4 class="media-heading">宝龙城市广场</h4>
                    <h5>来自：宝龙广场星火Wifi</h5>
                </div>
                <h4 class="text-indent:2em">新浪云存储是新浪云服务针对移动互联网打造的下一个重要的产品,新浪有10多年服务于几千万日访问用户的充足经验,新浪云存储采用先进的全分布式系统架构和存储技术,覆盖...</h4>
                <h5>今天00：00</h5>
                <a type="button" class="btn btn-default more" data-container="body" data-toggle="popover" data-placement="left" data-content="123">
                    <span class='glyphicon glyphicon-option-horizontal' aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="container msg">
        <div class="row">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="img-circle media-object" src="__PUBLIC__/images/user.png" width="60px" height="60px">
                    </a>
                </div>
                <div class="media-body text-justify">
                    <h4 class="media-heading">宝龙城市广场</h4>
                    <h5>来自：宝龙广场星火Wifi</h5>
                </div>
                <h4 class="text-indent:2em">新浪云存储是新浪云服务针对移动互联网打造的下一个重要的产品,新浪有10多年服务于几千万日访问用户的充足经验,新浪云存储采用先进的全分布式系统架构和存储技术,覆盖...</h4>
                <h5>今天00：00</h5>
                <a type="button" class="btn btn-default more" data-container="body" data-toggle="popover" data-placement="left" data-content="123">
                    <span class='glyphicon glyphicon-option-horizontal' aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/js/Friends.js"></script>
</body>
</html>